<template>
	<view class=""  style="width: 750rpx; background: linear-gradient(180deg,#5A53CE, #5A53CE);min-height: 100vh;display: inline-block;">
	
		<view :style="{backgroundImage:'url('+$ftpUrl('/maskGround.png')+')'}"
			style="padding: 20rpx 40rpx; height: 240rpx; width: 690rpx;margin: 40rpx auto;background-size: cover;background-repeat: no-repeat;">
			<view style="color: #fff;">
				<view>账户余额（元）</view>
				<view class="u-flex u-row-between u-margin-top-60">
					<view>
						<text>￥</text><text class="u-font-weight" style="font-size: 60rpx;">{{user.balance}}</text>
					</view>

				</view>
			</view>
		</view>
	
		<view style="width: 700rpx;margin:40rpx auto;">
			<u-section title="充值金额" :right="false" line-color='#4F8BFF' color="#fff"></u-section>
			<view class="u-padding-30 shadow" style="width: 700rpx;margin: auto;">
				<view class="u-flex u-flex-wrap u-row-between u-margin-top-20">
					<view @click="Block(index,item)" v-for="(item,index) in list" :key="index" v-if="list.length" 
						class="listBlock" :class="current==index?'Listchange':''">
						<view style="font-size: 26rpx;">{{item.money}}<text>元</text></view>
						<view style="font-size: 22rpx;" class=" u-margin-top-10">赠送:{{item.saleMoney}}<text>元</text></view>
						
						
					</view>
				</view>
			</view>
			<view @click="ok"
				style="
				width: 700rpx;
				margin: auto;
			background: linear-gradient(180deg,#4f8bff , #745eff );
			border-radius: 58px;
			box-shadow: 0px 6px 12px 0px rgba(2,88,255,0.28);padding: 30rpx;margin-top: 20rpx;text-align: center;color: #fff;margin-top: 40rpx;">
				立即充值
			</view>
			<view class="u-margin-top-20" style="color: #CCCDDE;">
				充值说明</br>
				1.充值余额永久有效，不支持退款</br>
				1.余额充值仅限当前门店有效</br>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import wxpay from '@/common/wxpay.js'
	export default {
		data() {
			return {
				list: [],
				current: 0,
				storeId:'',
				user:{}
			}
		},
		onReady() {
			
		},
		onLoad(options) {
			if(options.id){
				this.storeId=options.id
				this.getCharge()
			}
			this.getUser()
		},
		methods: {
			getCharge() {
				this.$u.post('/index/recharge', {
					store_id:this.storeId
				}).then(res => {
					this.list=res
				})
			},
			Block(index) {
				this.current = index;
			},
			ok() {
				this.$u.post('/indent/recharge', {
					recharge_id: this.list[this.current].id,
						store_id:this.storeId
				}).then(res => {
					const wx = new wxpay(res);
					wx.pay().then(res => {
						this.$refs.uToast.show({
							title: '充值成功',
							type: 'success',
							callback: () => {
								uni.navigateBack({
									delta:2
								})
							}

						})
					}).catch(err => {

					})
				})
			},
			getUser() {
				this.$u.api.userInfo().then(res => {
					this.user = res;
				})
			},

		}
	}
</script>

<style>
	.listBlock {
		width: 280rpx;
		text-align: center;
		border-radius: 10rpx;
		
		height: 120rpx;
		
		/* line-height: 120rpx; */
		margin-bottom: 20rpx;
		padding: 25rpx 0;;
		color: #fff;
		background: #403A99;
	}

	.Listchange {
		background: #598BFE;
		border: 0;
		transition: all 0.3s;
		color: #fff;
	}
</style>
